$(function () {
    //加载头部文件
    $('.common-header').load('../header/header.html', function () {
        const script = document.createElement('script');
        script.src = '../Home/js/header.js'
        document.body.appendChild(script)

    })
    //加载公共尾
    $('.common-footer').load('../footer/footer.html', function () {
        // load是ajax的异步操作
        // 加载完成后的回调函数

    })


    //headerNav的样式
    function clear() {
        $('.headerNav li').removeClass('active');
    }

    $('.headerNav li').mouseenter(function () {
        clear();
        $(this).addClass('active');
    })

    pages()

})

function pages() {
    var detailList
    if (detailList == null || detailList.length == 0) {
        detailList = []
    }
    $('.goods-detail').click(function () {
        console.log($(this));
        var goodObj = {
            id: $(this).find('span').text(),
            imgurl: $(this).find('img')[0].src,
            name: $(this).find('.p1').html(),
            describe: $(this).find('.p2').html(),
            price: parseInt($(this).find('.p3').html()),
            num: 1
        };
        console.log(goodObj.id, goodObj.imgurl, goodObj.name, goodObj.describe, goodObj.price);

        if (detailList.length === 0) {
            // 添加到detailList
            detailList.push(goodObj);
        } else {
            for (var i = 0; i < detailList.length; i++) {
                // 如果商品已经存在cookie中，则数量+1
                if (detailList[i].id === goodObj.id) {
                    detailList[i].num++;
                    localStorage.setItem('detaillist', JSON.stringify(detailList))
                    break
                }
            } if (i === detailList.length) {
                // 添加到detailList
                detailList.push(goodObj);
                localStorage.setItem('detaillist', JSON.stringify(detailList))
            }
        }
        localStorage.setItem('detaillist', JSON.stringify(detailList))
    })

}
let ul = document.querySelector('.shopping ul');

let xhr = new XMLHttpRequest();
xhr.onloadend = function () {
    if (xhr.status == 200) {
        res = JSON.parse(xhr.responseText);

        //创建元素添加到ul中
        function createLi(res, start, end) {
            let se = '';

            for (let i = start; i < end; i++) {
                se += `<li>
                <a class="goods-detail" href="http://localhost/mi/detail/">
                <img src="${res[i].imgurl}" alt="">
                    <p class="p1">${res[i].name}</p>
                    <p class="p2">${res[i].describe}</p>
                    <p class="p3">${res[i].price}元</p>
                    <span class="data-id" style="display:none">${res[i].id}</span>
                </a>
                </li>`
            }

            ul.innerHTML += se;
            pages()
        }
        //先调用一次
        createLi(res, 0, 50);




        //单纯升序函数
        function upSort(res) {
            let min;
            // 外循环
            for (let outer = 0; outer <= res.length - 2; outer++) {
                min = outer;
                // 内循环
                for (let inner = outer + 1; inner < res.length; inner++) {
                    if (Number(res[inner].price) < Number(res[min].price)) {
                        min = inner;
                    }
                }
                let temp = res[outer];
                res[outer] = res[min];
                res[min] = temp;
            }
            pages()
        }


        //单纯降序函数
        function downSort(res) {
            let max;

            // 外循环
            for (let outer = 0; outer <= res.length - 2; outer++) {
                max = outer;
                // 内循环
                for (let inner = outer + 1; inner < res.length; inner++) {
                    if (Number(res[inner].price) > Number(res[max].price)) {
                        max = inner;
                    }
                }
                let temp = res[outer];
                res[outer] = res[max];
                res[max] = temp;
            }
            pages()
        }


        //定义价格升序函数
        function rise(ele, end) {
            upSort(ele);
            console.log(ele);

            ul.innerHTML = '';
            createLi(ele, 0, end);
            pages()
        }

        //定义价格下降函数
        function fall(ele, end) {
            ele.reverse();

            downSort(ele);
            console.log(ele);

            ul.innerHTML = '';
            createLi(ele, 0, end);
            pages()
        }


        //点击价格降序按钮  全部升序
        let up = document.getElementsByClassName('price-up')[0];
        up.onclick = function () {
            rise(res, 50);
            pages()
        }

        //点击  价格降序按钮 全部降序
        let down = document.getElementsByClassName('price-down')[0];
        down.onclick = function () {
            fall(res, 50);
            pages()
        }



        //全部分类
        let crumbs = document.getElementsByClassName('crumbs-link')[0];
        crumbs.onclick = function () {
            ul.innerHTML = '';
            createLi(res, 0, 50);
            pages()
        }


        let allA = document.querySelectorAll('.sort a');


        //定义筛选函数
        function select(ele, key, end) {
            let arr = [];
            ele.onclick = function () {

                console.log($(this).siblings());
                res.forEach(item => {
                    if (item.name.includes(key)) {
                        arr.push(item);
                    }
                });

                allA.forEach(item => {
                    if (item.classList.contains('high')) {
                        item.classList.remove('high');
                    }
                })



                ul.innerHTML = '';
                console.log(arr);
                createLi(arr, 0, end);

                $(this).addClass('high');
                pages()
                return arr;

            }


        }



        function select1(ele, key, end) {
            let arr = [];
            ele.onmouseenter = function () {

                console.log($(this).siblings());
                res.forEach(item => {
                    if (item.name.includes(key)) {
                        arr.push(item);
                    }
                });

                allA.forEach(item => {
                    if (item.classList.contains('high')) {
                        item.classList.remove('high');
                    }
                })

                ul.innerHTML = '';
                console.log(arr);
                createLi(arr, 0, end);

                $(this).addClass('high');
                pages()
                return arr;

            }
        }


    }



    //定义全部商品分类
    let all = document.getElementsByClassName('all')[0];
    select1(all, '小米', 50);


    //分类小米手机
    let xmPhone = document.getElementsByClassName('xmPhone')[0];
    select1(xmPhone, '手机', 4);















    //分类电视
    let TV = document.getElementsByClassName('TV')[0];
    select(TV, '电视', 15);


    //分类手表
    let watch = document.getElementsByClassName('watch')[0];
    select(watch, '手表', 6);

    //分类Redmi
    let Redmi = document.getElementsByClassName('Redmi')[0];
    select(Redmi, 'Redmi', 26);

    //分类balance
    let balance = document.getElementsByClassName('balance')[0];
    select(balance, '平衡车', 19);
    pages()

}

xhr.open('get', 'http://localhost/mi/mi.json');

xhr.send(null);






